import React, { Component } from "react";

import { NavBar, Toast } from "antd-mobile";
import {
  get_Current_City,
  get_Map_Hourse,
  get_Hourse_List,
} from "./../../utils/biz_http.js";

import "./map.scss";
import "../../assets/fonts/iconfont.css";

const BMap = window.BMap;

class Map extends Component {
  state = {
    showClass: "", // show：小区区房源列表界面显示  '':隐藏
    hlist: [], // 小区房屋列表数据源
  };
  componentDidMount() {
    this.renderMap();
  }

  current_level = 1;

  // 渲染地图到容器中
  async renderMap() {
    var map = new BMap.Map("maparea");
    this.map = map;
    // 创建地址解析器实例
    var myGeo = new BMap.Geocoder();
    let { label, value } = await get_Current_City();
    // console.log(label, value);
    // 将地址解析结果显示在地图上，并调整地图视野
    label = label || "广州";
    value = value || "AREA|e4940177-c04c-383d";
    myGeo.getPoint(
      label,
      async (point) => {
        if (point) {
          map.centerAndZoom(point, 11);
          // 添加一个红色小点的标记物
          //   map.addOverlay(new BMap.Marker(point));

          // 添加比例尺控件
          map.addControl(new BMap.NavigationControl());
          // 添加缩放控件
          map.addControl(new BMap.ScaleControl());

          // 请求数据并创建文本覆盖物
          this.GetHourseData(value);
        }
      },
      label
    );
  }

  async GetHourseData(value) {
    // 请求数据并创建文本覆盖物
    //   that.createLabel(map, point);
    Toast.loading("正在请求房源");
    let hourseList = await get_Map_Hourse({ id: value });
    //   console.log(hourseList.data.body);
    hourseList.data.body.forEach((item) => {
      // 创建房源覆盖物
      this.createHourseLabel(item);
    });

    Toast.hide();
  }

  createHourseLabel(hourseObj) {
    /* html结构
       <div class="bubble">
        <p class="name">天河</p>
        <p>100套</p>
       </div>
    */

    /**
       {
        "label": "白云",
        "value": "AREA|8b5511b3-7699-f921",
        "coord": {
            "latitude": "23.17599",
            "longitude": "113.261927"
        },
        "count": 375
    },
       */
    let {
      coord: { longitude, latitude },
      label,
      value,
      count,
    } = hourseObj;

    const areaPoint = new BMap.Point(longitude, latitude);
    var opts = {
      position: areaPoint, // 指定文本标注所在的地理位置
    };
    var labelObj = new BMap.Label(`${label} ${count}套`, opts); // 创建文本标注对象

    labelObj.id = value; //设置id

    // 去掉红色点
    labelObj.setStyle({
      border: "none",
      "background-color": "rgba(0,0,0,0)",
    });

    //   小区之前的覆盖物
    if (this.current_level < 3) {
      //   注册事件
      labelObj.addEventListener("click", () => {
        //   console.log("覆盖物id=", labelObj.id);
        // 以当前覆盖物为中心放大地图 1: 区
        if (this.current_level === 1) {
          this.map.centerAndZoom(areaPoint, 13);
          this.current_level = 2; // 镇
        } else if (this.current_level === 2) {
          this.map.centerAndZoom(areaPoint, 15);
          this.current_level = 3; // 小区
        }

        // 请求数据并创建文本覆盖物
        this.GetHourseData(value);

        // 解决清楚覆盖物时报错问题
        setTimeout(() => {
          // 清除所有覆盖物
          this.map.clearOverlays();
        }, 0);
      });

      // 区，镇覆盖物
      labelObj.setContent(`
        <div class="bubble">
        <p class="name">${label}</p>
        <p>${count}套</p>
       </div>
      `);
    } else {
      // 小区覆盖物
      labelObj.setContent(`
      <div class="rect">
        <span class="housename">${label}</span>
        <span class="housenum">${count}套</span>
        <i class="arrow"></i>
    </div>
    `);

      // 注册事件
      labelObj.addEventListener("click", () => {
        //   打开小区房源列表界面
        this.setState({
          showClass: "show",
        });

        //   获取数据
        get_Hourse_List({ cityId: value }).then((res) => {
          /*
            {
                "status": 200,
                "description": "请求成功",
                "body": {
                    "list": [
                    {
                        "houseImg": "/newImg/7bj63hd2c.jpg",
                        "title": "复兴门外大街 2室1厅 10000元",
                        "tags": [
                        "近地铁",
                        "集中供暖",
                        "新上"
                        ],
                        "price": 10000,
                        "desc": "二室/66/南/复兴门外大街",
                        "houseCode": "5cc467fc1439630e5b430566"
                    }
                ]
            }
        }
         */
          this.setState({
            hlist: res.data.body.list,
          });
        });
      });

      // 注册地图拖动事件
      this.map.addEventListener("movestart", () => {
        //   关闭小区房源列表界面
        this.setState({
          showClass: "",
        });
      });
    }

    this.map.addOverlay(labelObj);
  }

  createLabel(map, point) {
    var opts = {
      position: point, // 指定文本标注所在的地理位置
      offset: new BMap.Size(30, -30), //设置文本偏移量
    };
    var label = new BMap.Label(
      "欢迎使用百度地图，这是一个简单的文本标注哦~",
      opts
    ); // 创建文本标注对象
    label.setStyle({
      color: "red",
      fontSize: "12px",
      height: "20px",
      lineHeight: "20px",
      fontFamily: "微软雅黑",
    });
    map.addOverlay(label);
  }

  render() {
    return (
      <div className="map">
        {/* 顶部导航 */}
        <NavBar
          mode="light"
          //   icon={<Icon type="left" />}
          icon={<i className="iconfont icon-back"></i>}
          onLeftClick={() => this.props.history.go(-1)}
        >
          地图找房
        </NavBar>

        {/* 地图渲染容器 */}
        <div id="maparea">dd</div>

        {/* 小区房源列表结构 */}
        <div className={["houseList", this.state.showClass].join(" ")}>
          {/* 头部区域 */}
          <div className="titleWrap">
            <h1 className="listTitle">房屋列表</h1>
            <a className="titleMore" href="/home/index">
              更多房源
            </a>
          </div>

          <div className="houseItems">
            {/* 内容区域-遍历 */}
            {this.state.hlist.map((item, index) => (
              <div
                className="house"
                onClick={() =>
                  this.props.history.push(`/details/${item.houseCode}`)
                }
              >
                <div className="imgWrap">
                  <img
                    className="img"
                    src={`https://api-haoke-web.itheima.net${item.houseImg}`}
                    alt=""
                  />
                </div>
                <div className="content">
                  <h3 className="title">{item.title}</h3>
                  <div className="desc">{item.desc}</div>
                  {/*  // 索引号：   0 1 2 3
                                  // 对应类：tag1 2 3
                                  // tagClass => tag1 / tag2 / tag3 */}
                  <div>
                    {item.tags.map((tag, index) => (
                      <span className={`tag tag${index < 3 ? ++index : ""}`}>
                        {tag}
                      </span>
                    ))}
                  </div>
                  <div className="price">
                    <span className="priceNum">{item.price}</span> 元/月
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
}

export default Map;
